<template>
	<div id="order_container">
		<div id="order_title" class="c-txt">
			<span class="fl">我的订单</span>
			<router-link class="fr c-txt" to="/order/list?type=1">查看全部订单</router-link>
		</div>
		<div id="order-entries">
			<router-link v-for="entry in entries" :key="entry.name" :to="entry.path">
				<img :src="entry.img">
				<p>{{entry.title}}</p>
				<span class="red-point" v-show="orderNum[entry.name]">
					{{orderNum[entry.name]}}
				</span>
			</router-link>
		</div>
	</div>
</template>
<script>
import pay from '@/assets/img/user/pay.png'
import send from '@/assets/img/user/send.png'
import comment from '@/assets/img/user/comment.png'
import receive from '@/assets/img/user/receive.png'
import {mapGetters, mapActions} from 'vuex'
export default{
	name:'OrderPart',
	created(){
		this.$store.dispatch('order/getOrderNum')
	},
	data(){
		return {
			entries:[{
				title: '待付款',
				img: pay,
				name: 'to_pay',
				path: '/order/list?type=2'
			},{
				title: '待发货',
				img: send,
				name: 'to_deliver',
				path: '/order/list?type=3'
			},{
				title: '待收货',
				img: receive,
				name: 'to_receive',
				path: '/order/list?type=4'
			},{
				title: '待评价',
				img: comment,
				name: 'to_comment',
				path: '/order/list?type=5'
			}]
		}
	},
	computed:{
		...mapGetters({
			orderNum: 'order/orderNum'
		})
	}
}
</script>
<style lang='less' scoped>
	#order_container{
		background: #fff;
	}
	#order_title{
		padding: 0 .4rem;
		height: 1.17rem;
		line-height: 1.17rem;
		border-bottom: 1px solid #ddd;
	}
	#order-entries{
		overflow: hidden;
		a{
			float: left;
			width: 25%;
			text-align: center;
			font-size: .26rem;
			color: #858585;
			padding: .3rem 0 .2rem;
			position: relative;
		}
		.red-point{
			top: .15rem;
			right: .8rem;
		}
	}
</style>
